<template>
  <view class="group-page">
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="time">{{item.time}}</view>
        <view class="title">{{item.title}}</view>
        <u-parse :content="item.inText"></u-parse>
        <view class="btn">
          <u-button text="复制文案" size="small" type="primary" @click="copyText(item.inText)"></u-button>
        </view>
        <view class="image" v-for="(o, i) in item.inImages" :key="i">
          <u--image
              @click="saveImage(o, item.inImages)"
              :fade="true" duration="450"
              lazy-load mode="widthFix" :src="baseUrl + o" v-if="o"></u--image>
        </view>
        <view class="i">点击图片预览,长按保存</view>
      </view>
    </view>
    <v-tab :selected="'/pages/material/index'" />
  </view>
</template>

<script>
import Tab from '../../components/tab'
import color from '@/config/color.js'
import config from '@/config/config.js'
import base64 from '../../util/base64'
import Group from '../../api/group'
// import Item from './components/Item'

const groupModel = new Group()
export default {
  components: {
    'v-tab': Tab,
    // 'v-item': Item
  },
  onLoad() {

    uni.hideTabBar({
      animation: false,
      success: () => {

      },
      fail: () => {

      }
    })
    uni.setNavigationBarTitle({
      title: '素材库'
    })
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: this.activeColor,
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  },
  // 分享
  onShareAppMessage(res) {
    return {
      // title: '快递熊小二',
      path: '/pages/index/index?scene=' +
          (this.$store.getters['User/info'] ? this.$store.getters['User/info'].id : 0),
      // 这里还可以定义图片
      // imageUrl: '',
    }
  },
  onShow() {
    this.list = []
    this.total = 0
    this.queryList = {
      page: 0,
      pageSize: 20,
      busy: false
    }
    this.getList()
  },
  onHide() {
    // 一定要处理
    this.queryList = {
      page: 0,
      pageSize: 20,
      busy: false
    }
    this.list = []
    this.total = 0
  },
  // 加载更多,分页
  onReachBottom() {
    this.getList(true)
  },
  // 刷新
  onPullDownRefresh() {
    // onshow中处理, 不需要刷新
    // this.getList()
  },
  data() {
    return {
      baseUrl: config.baseUrl,
      activeColor: color.main_color,
      list: [],
      total: 0,
      queryList: {
        page: 0,
        pageSize: 20,
        busy: false
      }
    }
  },
  methods: {
    saveImage(url, list) {
      // 预览
      uni.previewImage({
        urls: list.map(x => config.baseUrl + x),
        current: config.baseUrl + url
      })
    },
    copyText(text) {
      uni.setClipboardData({
        // data: text,
        data: text.replace(/<[^>]*>?/gm, ''),
        success: () => {
          uni.showToast({
            icon: 'none',
            title: '复制成功'
          })
        }
      })
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        groupModel.materialList({
          ...this.queryList
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          console.log(data, '/.//')
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              console.log('aaa')
              this.list = this.list.concat(data.list)
            } else {
              console.log('list')
              this.list = data.list
            }
          }
          this.total = data.quantity
          console.log(this.list)
          uni.stopPullDownRefresh();
        })
      }
    },
  }
}
</script>

<style scoped lang="scss">
.group-page {
  min-height: 100vh;
  background: #f3f5f7;
  padding-bottom: 50px;
  .list {
    padding: 20rpx;
    .item {
      background: white;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 10px;
      .time {
        color: #cccccc;
        margin-bottom: 10px;
      }
      .title {
        font-weight: 700;
        font-size: 26rpx;
        margin-bottom: 10px;
        line-height: 1.3em;
      }
      .btn {
        width: 200rpx;
        margin-bottom: 10px;
      }
      .t {
        margin: 10px 0;
        color: #999999;
      }
      .image {
        //background: red;
        image, img {
          max-width: 100%;
        }
      }
    }
  }
}
</style>
